<template>
    <div class="tabs">
        <ul>
            <li v-for="i in loginTabs" :key="i.index">
                <router-link :to="i.path" :class="routerTitle==i.name ? 'alinkColor':''">{{i.name}}</router-link>
            </li>
        </ul>
    </div>
</template>

<script setup>
    import { ref,reactive,getCurrentInstance } from 'vue'
    import { useRouter } from 'vue-router';
    const { proxy } = getCurrentInstance()
	  const _this = proxy
    const $router = useRouter();
    const routerTitle = ref('');
    routerTitle.value = $router.currentRoute.value.meta.title
    const loginTabs = reactive([
        {
            path:'/enterprise/login',
            name:'企业端',
        },{
            path:'/home/login',
            name:'求职端',
        }
        ])
</script>

<style lang="scss" scoped>
    .tabs{
        width: 100%;
        ul{
            display: flex;
            justify-content: center;
            li{
                overflow: hidden;
                font-size: 14px;
                border: 1px solid #a5a3a3;
                border-radius: 4px;
                background-color: #fafafa;
                margin: 0 2px;
                a{width: 100%;height: 100%;padding: 2px 10px;display: inline-block;}
            }
        }
    }
    .alinkColor{background-color: #1989fa; color: #ffffff !important;}
</style>
